<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
    <link rel="stylesheet" href="../javascripts/lib/jqm/jquery.mobile-1.4.3.min.css"/>
    <link rel="stylesheet" href="../stylesheets/main.css"/>
    <script src="../javascripts/lib/jq/jquery-2.1.1.min.js"></script>
    <script src="../javascripts/lib/jqm/jquery.mobile-1.4.3.min.js"></script>
    <title></title>
</head>
<body>
<div class="a" data-role="page" id="msgDetailPage">
<div data-role="header" id="header">
    <!--<a class="ui-btn ui-icon-back ui-btn-icon-left" href="#msgListPage">返回</a>-->
    <h1>详细信息</h1>
</div>
<div data-role="content" data-theme="c" >
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    function start(){
        var url=encodeURIComponent(window.location.href);
        $.get('/video?url='+url,function(datas){
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wx451bc6acf8eb6a4b', // 必填，公众号的唯一标识
                timestamp:datas.signs.timestamp , // 必填，生成签名的时间戳
                nonceStr: datas.signs.nonceStr, // 必填，生成签名的随机串
                signature: datas.signs.signature,// 必填，签名，见附录1
                jsApiList: ['checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                    'translateVoice',
                    'startRecord',
                    'stopRecord',
                    'onRecordEnd',
                    'playVoice',
                    'pauseVoice',
                    'stopVoice',
                    'uploadVoice',
                    'downloadVoice',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'getNetworkType',
                    'openLocation',
                    'getLocation',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'closeWindow',
                    'scanQRCode',
                    'chooseWXPay',
                    'openProductSpecificView',
                    'addCard',
                    'chooseCard',
                    'openCard'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function(){
                aa='xx';
            });
        });

    }
    start();
var aa = null;

    function downimg(obj){
        var ccc = setInterval(function(){
            if(aa=='xx'){

                clearInterval(ccc);
                var arr = obj;
                var msg = arr.split(",");

                var html="";
                var i=0;
                downagin();
                function downagin(){
                    wx.downloadImage({
                        serverId: msg[i],
                        success: function (res) {
                            html+='<img id="contents" src="'+res.localId+'" style="width: 200px;"/><br>';
                            i++;
                            if(i<msg.length){
                                downagin();
                            }else{
                                $('#imgshow').append(html);
                            }
                        },
                        fail: function (res) {
                            html+='<img id="contents" src="../image/errimg.png" style="width: 180px;"/><br>';
                            i++;
                            if(i<msg.length){
                                downagin();
                            }else{
                                $('#imgshow').append(html);
                            }
                        }
                    });
                }
            }
        },500)

    }
    function downvoice(obj){
        var flag=$(obj).attr('name');
        if(flag=="true"){
            var serverId=$(obj).attr('id');
            var localId="";
            wx.downloadVoice({
                serverId: serverId,
                success: function (res) {
                    localId = res.localId;
                    wx.playVoice({
                        localId: localId
                    });
                    $(obj).attr('name','false');
                    $(obj).attr('id',localId);
                },
                fail: function (res) {
                    alert("此语音已过期，无法播放。");
                }
            });
        }else{
            var localid=$(obj).attr('id');
            wx.playVoice({
                localId: localid
            });
        }
    }
</script>
<style>

    img,input{
        border:none;
    }

    a{
        color:#198DD0;
        text-decoration:none;
    }
    a:hover{
        color:#ba2636;
        text-decoration:underline;
    }
    a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
    :focus{outline:0;}


    .talk_record{
        width: 100%;

        overflow: hidden;
        /*border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #434343;*/
        margin: 0px;
        /*background-color: #D3D3D3 ;*/
    }

    * html .jspCorner{margin:0 -3px 0 0;}
    .jp-container{width:100%;position:relative;background-color: transparent;float:left;}


    /*讨论区*/
    .jp-container .talk_recordbox{
        min-height:80px;
        color: #afafaf;
        margin-bottom: 5px;
        /*margin-top: 5px;*/
        padding-top: 5px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
    }

    .jp-container .talk_recordbox:first-child{border-top:none;}
    .jp-container .talk_recordbox:last-child{border-bottom:none;}
    .jp-container .talk_recordbox .talk_recordtextbg{
        float:left;
        width:10px;
        height:30px;
        display:block;
        margin-bottom: 5px;
        background-image: url(../images/talk_recordtext.png);
        background-repeat: no-repeat;
        background-position: left top;}
    .jp-container .talk_recordbox .talk_recordtext{
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background-color:#b8d45c;
        width:70%;
        margin-bottom: 5px;
        height:auto;
        display:block;
        padding: 5px;
        float:left;
        color:#333333;
    }
    .jp-container .talk_recordbox h3{
        font-size:14px;
        padding:2px 0 5px 0;
        /*text-transform:uppercase;*/
        font-weight: 100;

    }
    .jp-container .talk_recordbox .user {
        float:left;
        display:inline;
        height: 46px;
        width: 46px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    /*自己发言样式*/
    .jp-container .talk_recordboxme{
        /*display:block;*/
        min-height:80px;
        color: #afafaf;
        /*margin-top: 5px;*/
        margin-bottom: 5px;
        padding-top: 5px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
    }
    .jp-container .talk_recordboxme .talk_recordtextbg{
        float:right;
        width:10px;
        height:30px;
        display:block;
        margin-bottom: 5px;
        background-image: url(../images/talk_recordtextme.png);
        background-repeat: no-repeat;
        background-position: left top;}

    .jp-container .talk_recordboxme .talk_recordtext{
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background-color:#D3D3D3;
        width:70%;
        margin-bottom: 5px;
        height:auto;
        padding: 5px;
        color:#666;
        font-size:12px;
        float:right;

    }
    .jp-container .talk_recordboxme h3{
        font-size:14px;
        padding:2px 0 5px 0;
        /*text-transform:uppercase;*/
        font-weight: 100;
        color:#333333;

    }
    .jp-container .talk_recordboxme .user{
        float:right;
        height: 46px;
        width: 46px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        display:inline;
    }
    .talk_time{
        color: #666;
        text-align: right;
        width: 100%;
        display: block;
    }
</style>

<%if(messageList.length>0){%>
<!--<messageList.forEach(function(msg){>-->

<div class="talk_record">

    <div id="jp-container" class="jp-container">
        <%messageList.forEach(function(message,index){%>
        <%if(message.openid==thisopenid){%>
        <%if(message.msgtype=="voice"){%>
        <div class="talk_recordboxme">
            <div class="user"><img style="width: 46px; height: 46px;" src="<%=message.headimgurl%>" onerror="this.src='../images/logo.png'"/><%=message.nickname.substring(0,4)%></div>
            <div class="talk_recordtextbg">&nbsp;</div>
            <div class="talk_recordtext" name="true" id="<%=message.sendcontent%>" onclick="downvoice(this);">

                <h3 style="color: red">语音</h3>
                <span class="talk_time"><%=message.date%></span>
            </div>
        </div>
        <%}else if(message.msgtype=="img"){%>
        <div class="talk_recordboxme">
            <div class="user"><img style="width: 46px; height: 46px;" src="<%=message.headimgurl%>" onerror="this.src='../images/logo.png'"/><%=message.nickname.substring(0,4)%></div>
            <div class="talk_recordtextbg">&nbsp;</div>
            <div class="talk_recordtext" id="imgshow">
                <script>
                    downimg('<%=message.sendcontent%>');
                </script>
            </div>
        </div>
        <%}else{%>
        <div class="talk_recordboxme">
            <div class="user"><img style="width: 46px; height: 46px;" src="<%=message.headimgurl%>" onerror="this.src='../images/logo.png'"/><%=message.nickname.substring(0,4)%></div>
            <div class="talk_recordtextbg">&nbsp;</div>
            <div class="talk_recordtext">
                <h3><%=message.sendcontent%></h3>
                <span class="talk_time"><%=message.date%></span>
            </div>
        </div>
        <%}%>
        <%}else{%>
        <%if(message.msgtype=="voice"){%>
        <div class="talk_recordbox">
            <div class="user"><img style="width: 46px; height: 46px;" src="<%=message.headimgurl%>" onerror="this.src='../images/logo.png'" /><%=message.nickname.substring(0,4)%></div>
            <div class="talk_recordtextbg" >&nbsp;</div>
            <div class="talk_recordtext" name="true" id="<%=message.sendcontent%>" onclick="downvoice(this);">
                <h3 style="color: red">语音</h3>
                <span class="talk_time"><%=message.date%></span>
            </div>
        </div>
        <%}else if(message.msgtype=="img"){%>
        <div class="talk_recordbox">
            <div class="user"><img style="width: 46px; height: 46px;" src="<%=message.headimgurl%>" onerror="this.src='../images/logo.png'" /><%=message.nickname.substring(0,4)%></div>
            <div class="talk_recordtextbg" >&nbsp;</div>
            <div class="talk_recordtext" id="imgshow">
                <script>
                    downimg('<%=message.sendcontent%>');
                </script>
                <span class="talk_time"><%=message.date%></span>
            </div>
        </div>
        <%}else{%>
        <div class="talk_recordbox">
            <div class="user"><img style="width: 46px; height: 46px;" src="<%=message.headimgurl%>" onerror="this.src='../images/logo.png'" /><%=message.nickname.substring(0,4)%></div>
            <div class="talk_recordtextbg">&nbsp;</div>
            <div class="talk_recordtext">
                <h3><%=message.sendcontent%></h3>
                <span class="talk_time"><%=message.date%></span>
            </div>
        </div>
        <%}%>
        <%}%>
        <%});%>
    </div>
</div>
<%}%>

</div>
</div>

<!--  <div data-role="page" id="dialogmsg" data-close-btn="right">
      <div data-role="header">
          <h1>Dialog</h1>
      </div>

      <div role="main" class="ui-content">
          <h1>Right close button</h1>
          <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
          <a href="#" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>
      </div>

  </div>-->
</body>
</html>